<template>
	<div class="hottable">
		<div class="head">
			<h4>商品列表</h4>
			<router-link :to="`/admin/update`" class="addnew">添加新的商品</router-link>
		</div>
		<div class="line"></div>
		<el-table :data="booklist" height="500" border style="width: 100%;height: 500px;">
			<el-table-column prop="name" label="名称" fixed width="180">
			</el-table-column>
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="author" label="作者">
			</el-table-column>
			<el-table-column prop="maker" label="厂家">
			</el-table-column>
			<el-table-column prop="" label="日期">
				<template slot-scope="scope">
					<span>{{filterTime(scope.row.tmake)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="salenum" label="库存">
			</el-table-column>
			<el-table-column prop="" label="图片">
				<template slot-scope="scope">
					<div>
						<img v-bind:src="`http://127.0.0.1/api/public/showimg/${scope.row.pic}`"
							style="height: 60px; width: 60px;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" fixed="right">
				<template slot-scope="scope">
					<div>
						<router-link :to="`/admin/update/${scope.row.id}`">修改</router-link>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>


<script>
	export default {
		name: 'AdminBookList',
		data() {
			return {
				booklist: [],
				page: {
					start: 1,
					num: 3,
					total: 0
				}
			}
		},
		computed: {
			filterTime() {
				return (t) => {
					let d = new Date(t);
					let year = new Date(t).getFullYear();
					let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
					let date = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
					return `${year}-${month}-${date}`;
				}
			}
		},
		methods: {
			findbookList() {
				this.$get('/api/adm/book/findByPage/1/30').then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.booklist = resp.data.data.books;
					console.log(this.booklist);
				})
			}
		},
		mounted() {
			this.findbookList();
		}
	}
</script>

<style scoped>
	a {
		color: #000000;
	}

	.head {
		display: flex;
		justify-content: space-between;
	}

	.line {
		border: #409eff 1px solid;
		width: 100%;
		margin-bottom: 10px;
	}

	.addnew {
		line-height: 2em;
		height: 2em;
		border-radius: 5px;
		width: 130px;
		color: white;
		background-color: #409eff;
		margin-bottom: 10px;
	}
</style>